import React, { useContext } from "react";
import { Layout, Menu } from "antd";
import { themeContext } from "../../context";
import { routes, siderRoutes } from "../../router/routes";
import { useLocation, useNavigate } from "react-router-dom";
const { Sider } = Layout;
const Index = () => {
  // 跳转 hooks
  const navgiate = useNavigate()
  const { pathname } = useLocation()
  // 获取context 数据
  const { theme } = useContext(themeContext)
  // 导航菜单
  const items = siderRoutes.map((v => {
    return {
      key: v.path,
      label: v.meta.title,
      children: v.children && v.children.map((v, i) => {
        return {
          key: v.path,
          label: v.meta.title,
        }
      })
    }
  }))
  const handleClick = ({ key }) => {
    navgiate(key)
  }
  return (
    <Sider>
      <Menu mode="inline" defaultSelectedKeys={[pathname]} items={items} theme={theme} onClick={(e) => handleClick(e)}></Menu>
    </Sider>
  );
};

export default Index;
